<template>
	<div>
		<el-card shadow="never" body-style="padding:0;">
			<el-collapse v-if="list.length" v-model="activeNames">
				<el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
					<div
						slot="title"
						class="title_item"
						:style="{ height: browser.isMobile ? 230 + 'px' : 48 + 'px' }"
					>
						<template v-if="!browser.isMobile">
							<div class="item-info">
								<div>{{ item.add_time }}</div>
								<div>{{ item.dept_name }}</div>
								<div class="color-primary">
									<span class="color-gray">排店人员：</span>
									<span
										>[{{ item.order_user_deptname || "暂无" }} -
										{{ item.order_user_name || "暂无" }}]</span
									>
								</div>
								<div>
									订单类型：
									<span class="color-danger">
										[{{ item.cus_type | constFilter("CUS_TYPE") }}]
									</span>
								</div>
								<div v-if="item.refund_state == 3" class="tag plain info">
									退款被拒
								</div>
								<template v-else-if="item.status == 1 && item.is_rest == 1">
									<template v-if="item.restAmount > 0">
										<div class="tag plain danger">分期中</div>

										<span class="ml-1 color-gray">下次还款日期：</span>
										<span>{{ (item.next_pay_time * 1000) | dateFormat }}</span>
									</template>

									<div v-else class="tag plain success">已还清</div>
								</template>
								<div
									v-else
									class="tag plain"
									:class="$constFilter(item.status, 'ORDER_STATUS', 'type')"
								>
									{{ item.status | constFilter("ORDER_STATUS") }}
								</div>
							</div>
							<div>
								<el-button
									type="primary"
									@click.stop="openLog(item)"
									v-auth="'store_cusdetail_order_oplog'"
								>
									操作日志
								</el-button>
								<el-button
									type="danger"
									:disabled="item.status == 2"
									v-if="index == 0"
									@click.stop="resetOrder(item)"
									v-auth="'store_order_reset'"
									>重置</el-button
								>
								<el-button
									type="primary"
									@click.stop="cancelRefund(item)"
									v-if="item.status == 3"
								>
									撤销退款
								</el-button>
								<el-button
									type="warning"
									v-if="item.show_return == 1"
									@click.stop="refund(item)"
									v-auth="'store_order_refund'"
									>退款</el-button
								>
								<el-button
									size="small"
									type="warning"
									plain
									v-if="item.status == 10"
									:loading="item.refundcancelLoading"
									v-auth="'store_cusdetail_order_refundcancel'"
									@click.stop="refundCancel(item)"
								>
									撤销
								</el-button>
							</div>
						</template>
						<template v-else>
							<el-row>
								<el-col style="height:30px"
									><span>{{ item.add_time }}</span>
								</el-col>
								<el-col style="height:30px"
									><span>{{ item.dept_name }}</span>
								</el-col>
								<el-col style="height:30px">
									<div class="color-primary">
										<span class="color-gray">排店人员：</span>
										<span
											>[{{ item.order_user_deptname || "暂无" }} -
											{{ item.order_user_name || "暂无" }}]</span
										>
									</div>
								</el-col>
								<el-col style="height:30px">
									<div>
										订单类型：
										<span class="color-danger">
											[{{ item.cus_type | constFilter("CUS_TYPE") }}]
										</span>
									</div>
								</el-col>
								<el-col style="height:30px">
									<div v-if="item.refund_state == 3" class="tag plain info">
										退款被拒
									</div>
									<template v-else-if="item.status == 1 && item.is_rest == 1">
										<template v-if="item.restAmount > 0">
											<div class="tag plain danger">分期中</div>

											<span class="ml-1 color-gray">下次还款日期：</span>
											<span>{{
												(item.next_pay_time * 1000) | dateFormat
											}}</span>
										</template>

										<div v-else class="tag plain success">已还清</div>
									</template>
									<div
										v-else
										class="tag plain"
										:class="$constFilter(item.status, 'ORDER_STATUS', 'type')"
									>
										{{ item.status | constFilter("ORDER_STATUS") }}
									</div>
								</el-col>
								<el-col>
									<el-button
										type="primary"
										@click.stop="openLog(item)"
										v-auth="'store_cusdetail_order_oplog'"
									>
										操作日志
									</el-button>
									<el-button
										type="danger"
										:disabled="item.status == 2"
										v-if="index == 0"
										@click.stop="resetOrder(item)"
										v-auth="'store_order_reset'"
										>重置</el-button
									>
									<el-button
										type="warning"
										v-if="
											(item.status == 1 ||
												(item.finish_rest == 0 && item.is_rest == 1)) &&
												![10, 3].includes(item.status)
										"
										@click.stop="refund(item)"
										v-auth="'store_order_refund'"
										>退款</el-button
									>
									<el-button
										size="small"
										type="warning"
										plain
										v-if="item.status == 10"
										:loading="item.refundcancelLoading"
										v-auth="'store_cusdetail_order_refundcancel'"
										@click.stop="refundCancel(item)"
									>
										撤销
									</el-button>
								</el-col>
							</el-row>
						</template>
					</div>

					<div class="pa-1">
						<span class="mr-1">
							<span class="color-gray">预约来源：</span>
							<span>{{ item.add_user_deptname }} - {{ item.add_user_name }}</span>
						</span>
						<span class="color-gray">订单类型：</span>
						<span class="color-danger">
							[{{ item.cus_type | constFilter("CUS_TYPE") }}]
						</span>

						<span class="ml-1">
							<span class="color-gray">订单号：</span>
							<span>{{ item.order_no }}</span>
						</span>
						<span class="ml-1">
							<el-button type="primary" @click="changeSource(item)"
								>修改来源信息</el-button
							>
						</span>
					</div>
					<div></div>
					<div class="pa-1" v-if="item.remarks">
						<span class="mr-1">
							<span class="color-gray">备注：</span>
							<span>{{ item.remarks }}</span>
						</span>
					</div>
					<div class="tab-card-pad">
						<el-tabs type="card" v-model="activeTabs[index]">
							<el-tab-pane label="预约项目" name="first">
								<div class="pr-1">
									<cl-crud>
										<zm-table
											:auto-height="false"
											:columns="appointColumns"
											border
											:data="item.cartlists || []"
										>
											<cl-empty slot="empty" />
											<template #column-prod_name="{ scope: { row } }">
												{{ row.prod_name }}
												<span
													class="tag ml-1"
													v-if="row.maintain_type == 1"
												>
													维护
												</span>
												<span
													class="tag ml-1"
													v-if="row.maintain_type == 2"
												>
													开发
												</span>
											</template>
										</zm-table>
									</cl-crud>
								</div>
							</el-tab-pane>
							<el-tab-pane label="消费项目" name="second">
								<div class="pr-1">
									<cl-crud>
										<zm-table
											:auto-height="false"
											:columns="consumeColumns"
											:data="item.mainlists || []"
										>
											<cl-empty slot="empty" />
											<template #column-prod_name="{ scope: { row } }">
												{{ row.prod_name }}
												<el-tooltip
													v-if="row.upgrade_card == 1"
													class="item"
													effect="dark"
													:content="row.prod_name"
													placement="top-start"
												>
													<span class="tag danger ml-1">升级</span>
												</el-tooltip>
												<el-tooltip
													v-if="row.is_plus == 1"
													class="item"
													effect="dark"
													:content="row.prod_name"
													placement="top-start"
												>
													<span class="tag ml-1">加单</span>
												</el-tooltip>
												<span class="tag ml-1" v-if="row.is_maintain == 1">
													维护
												</span>
												<span class="tag ml-1" v-if="row.is_maintain == 2">
													开发
												</span>
												<span class="tag ml-1" v-if="row.give == 1">
													赠送
												</span>
												<el-tooltip
													v-if="row.coherent_card > 0"
													class="item"
													effect="dark"
													:content="row.prod_name"
													placement="top-start"
												>
													<span class="tag ml-1">划卡</span>
												</el-tooltip>
											</template>
											<template #column-real_amount="{ scope: { row } }">
												<span class="color-danger">{{
													row.real_amount
												}}</span>
											</template>
											<template #column-opt="{ scope: { row } }">
												<div>
													<el-button
														type="primary"
														size="mini"
														@click="editTeacher(row, item)"
														>修改老师</el-button
													>
												</div>
											</template>
										</zm-table>
									</cl-crud>
								</div>
							</el-tab-pane>
							<el-tab-pane label="消费金额" name="third">
								<div class="pad-1">
									<h4>金额概览</h4>
									<div class="consume-info amount pb-1">
										<div>
											订单总额：<strong
												>￥{{ item.total_amount || 0 }}</strong
											>
										</div>
										<div>
											应付金额：<strong class="color-primary">
												￥{{ item.pay_amount || 0 }}
											</strong>
										</div>
										<div>
											实付金额：<strong class="color-success">
												￥ {{ item.real_amount || 0 }}
											</strong>
										</div>
										<div>
											未付/欠款金额：<strong class="color-warning">
												￥{{ item.rest_amount || 0 }}
											</strong>
										</div>
										<div>
											成本金额：<strong class="color-danger">
												￥{{ item.costmoney || 0 }}
											</strong>
										</div>
										<div>
											服务手工费<strong class="color-danger">
												￥{{ item.sgmoney || 0 }}
											</strong>
										</div>
										<div>
											美容手工费<strong class="color-danger">
												￥{{ item.beauty_sgmoney || 0 }}
											</strong>
										</div>
										<div>
											退款金额<strong class="color-danger">
												￥{{ item.real_return || 0 }}
											</strong>
										</div>
									</div>
									<h4>付款方式</h4>
									<template v-if="item.paylists.length">
										<div class="consume-info pay pb-1">
											<div v-for="(pay, idx) in item.paylists" :key="idx">
												{{ pay.pay_name }}：<strong class="color-danger"
													>￥{{ pay.pay_amount }}</strong
												>
											</div>
										</div>
									</template>
									<template v-else>
										<div class="consume-info pay pb-1">
											<div>暂无信息</div>
										</div>
									</template>
									<!-- <h4>业绩明细</h4>
									<div class="consume-info performance">
										<div>
											客服业绩：<strong
												>￥{{ item.customer_price || 0 }}</strong
											>
										</div> -->
									<!-- <div>
											转介绍业绩：<strong
												>￥{{ item.real_achieve || 0 }}</strong
											>
										</div> -->
									<!-- </div> -->
								</div>
							</el-tab-pane>
							<el-tab-pane label="支付记录" name="fourth">
								<div class="pr-1">
									<cl-crud>
										<zm-table
											:auto-height="false"
											:columns="payColumns"
											:data="item.paylists || []"
										>
											<cl-empty slot="empty" />
										</zm-table>
									</cl-crud>
								</div>
							</el-tab-pane>
							<el-tab-pane label="订单凭证" name="credentials">
								<div class="pr-1">
									<cl-crud v-if="item.images.length > 0">
										<el-image
											v-for="(i, k) in item.images"
											style="width: 120px; height: 180px"
											:src="i"
											:preview-src-list="[i]"
										>
										</el-image>
									</cl-crud>
									<cl-crud v-else>
										<div class="pl-1">无订单凭证</div>
									</cl-crud>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</el-collapse-item>
			</el-collapse>
			<cl-empty v-else tips="暂无订单" />
		</el-card>
		<cl-dialog title="订单日志" :visible.sync="logVisible" :props="{ appendToBody: true }">
			<cl-data-table :columns="logColumns" :data="logs" stripe border :show-page="false" />
			<template #footer>
				<el-button @click="logVisible = false">关闭</el-button>
			</template>
		</cl-dialog>

		<!-- <order-form-old ref="form2" :detail="detail" @confirm="init" /> -->
		<refund-form ref="refundform" @confirm="init" />
		<reset-order-form ref="resetOrderForm" @confirm="init" />
		<cl-dialog
			title="修改来源信息"
			:visible.sync="sourceDialog"
			:props="{ appendToBody: true }"
		>
			<el-form ref="sourceFormRef" :model="sourceForm" label-width="80px">
				<el-form-item label="预约部门" prop="cart_dept_id">
					<cl-cascader
						style="width: 100%"
						v-model="sourceForm.cart_dept_id"
						:props="{ emitPath: false }"
						@change="changeAppointDept"
						:options="deptList"
					/>
				</el-form-item>
				<el-form-item
					label="来源人员"
					prop="user_id"
					:rules="[{ required: true, message: '请选择来源人员', trigger: 'change' }]"
				>
					<el-select v-model="sourceForm.user_id" filterable style="width: 100%">
						<el-option
							v-for="item in appointUser"
							:key="item.user_id"
							:label="item.user_name"
							:value="item.user_id"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="sourceDialog = false">取 消</el-button>
				<el-button @click="sourceConfirm" type="primary">确 认</el-button>
			</template>
		</cl-dialog>

		<cl-dialog
			title="修改老师"
			:visible.sync="editTeacherDialog"
			:props="{ appendToBody: true }"
		>
			<el-form ref="teacherFormRef" :model="teacherForm" label-width="100px">
				<el-form-item
					label="服务老师"
					prop="teacher_id"
					:rules="[{ required: true, message: '请选择来源人员', trigger: 'change' }]"
				>
					<cl-select v-model="teacherForm.teacher_id" clearable>
						<el-option
							v-for="(item, index) in teacherList"
							:key="index + '1'"
							:label="item.user_name"
							:value="item.user_id"
							:disabled="isSpecSelected(item.user_id)"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="服务老师2">
					<cl-select v-model="teacherForm.light_teacher_id" clearable>
						<el-option
							v-for="(item, index) in teacherList"
							:key="index + '1'"
							:label="item.user_name"
							:value="item.user_id"
							:disabled="isSpecSelected(item.user_id)"
						/>
					</cl-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="editTeacherDialog = false">取 消</el-button>
				<el-button @click="teacherConfirm" type="primary">确 认</el-button>
			</template>
		</cl-dialog>
	</div>
</template>
<script>
import dayjs from "dayjs";
import ResetOrderForm from "./reset-order-form";
import RefundForm from "./refund-form.vue";
import { mapState, mapGetters } from "vuex";
import teacherSelect from "@/components/teacher-select";
// import OrderFormOld from "./order-form-old";
// import OrderFormBack from "./order-form_back";

export default {
	components: {
		ResetOrderForm,
		RefundForm,
		teacherSelect
		// OrderFormOld
	},
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			logVisible: false,
			activeNames: [0],
			activeTabs: ["first"],
			list: [],
			url: "",
			appointColumns: [
				{
					label: "预约项目",
					prop: "prod_name",
					minWidth: 250,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "是否赠送",
					prop: "is_presents",
					width: 100,
					formatter: row => (row.is_presents == 1 ? "是" : "否")
				},
				{
					label: "是否体验",
					prop: "experience",
					width: 100,
					formatter: row => (row.experience == 1 ? "是" : "否")
				},
				{ label: "数量", prop: "buy_num", width: 80 },
				{
					label: "预约老师",
					prop: "teacher_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "预约价格（￥）",
					prop: "unit_price",
					width: 150
				},
				{
					label: "项目状态",
					prop: "status",
					width: 100,
					formatter: row => (row.status == 1 ? "消费" : "未消费")
				}
			],
			consumeColumns: [
				{
					label: "消费项目",
					prop: "prod_name",
					minWidth: 250,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "经营类目",
					prop: "f_category_name",
					minWidth: 250,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "赠送",
					prop: "is_presents",
					width: 100,
					formatter: row => (row.is_presents == 1 ? "是" : "否")
				},
				{ label: "数量", prop: "buy_num", width: 80 },
				{
					label: "服务老师",
					prop: "teacher_name",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "服务老师2",
					prop: "light_teacher",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "门店店长",
					prop: "sell_teacher",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				// {
				// 	label: "顾问老师",
				// 	prop: "adviser_teacher",
				// 	minWidth: 120,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },
				// {
				// 	label: "光电顾问老师",
				// 	prop: "lightadviser_teacher",
				// 	minWidth: 120,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },

				// { label: "补色周期", prop: "month", minWidth: 120 },
				{
					label: "预约价格（￥）",
					prop: "unit_price",
					minWidth: 130,
					formatter: row => {
						const { is_show, is_plus, self_price, unit_price } = row;
						return `${is_show && is_plus == 0 ? self_price : unit_price}`;
					}
				},
				// {
				// 	label: "服务手工费（￥）",
				// 	prop: "sgmoney",
				// 	minWidth: 140,
				// 	formatter: row => `${row.sgmoney}`
				// },
				// {
				// 	label: "美容手工费（￥）",
				// 	prop: "beauty_sgmoney",
				// 	minWidth: 140,
				// 	formatter: row => `${row.beauty_sgmoney}`
				// },
				{
					label: "成本（￥）",
					prop: "costmoney",
					minWidth: 100,
					formatter: row => `${row.costmoney}`
				},
				// {
				// 	label: "门店加单金额（￥）",
				// 	prop: "money",
				// 	minWidth: 150,
				// 	formatter: row => `${row.money}`
				// },
				{
					label: "实际消费金额（￥）",
					prop: "real_amount",
					minWidth: 150
				},
				{
					label: "操作",
					prop: "opt",
					width: 100,
					fixed: "right"
				}
			],
			logColumns: [
				{ label: "内容", prop: "content", minWidth: 250 },
				{
					label: "时间",
					prop: "time",
					width: 120,
					formatter: row => `${row.add_date} ${row.add_time}`
				},
				{ label: "操作人", prop: "user_name", width: 150 }
			],
			payColumns: [
				{
					label: "时间",
					prop: "pay_date",
					minWidth: 100
				},
				{
					label: "方式",
					prop: "pay_name",
					minWidth: 100
				},
				{
					label: "金额（￥）",
					prop: "pay_amount",
					minWidth: 120
				},
				{
					label: "状态",
					minWidth: 120,
					formatter: row => (row.status == 0 ? "未支付" : "已支付")
				}
			],
			logs: [],
			form: {
				main_id: "",
				liquidate_time: dayjs().format("YYYY-MM-DD"),
				remark: ""
			},
			pickerOptions: {
				disabledDate(time) {
					let date = dayjs(time);
					return date.isBefore("2021-07-25") || date.isAfter(dayjs());
				}
			},
			rules: {
				liquidate_time: [{ required: true, message: "请选择日期", trigger: "change" }]
			},
			sourceDialog: false,
			sourceForm: { user_id: "" },
			appointUser: [],
			editTeacherDialog: false,
			teacherForm: {},
			teacherList: [],
			deptList: []
		};
	},
	created() {
		// let now = dayjs();
		// console.log(now);
		// console.log('now.subtract(2, "day")', now.subtract(2, "day"))
		// console.log(this.detail, "detail");
	},
	computed: {
		...mapGetters(["browser"])
	},
	methods: {
		//获取预约部门
		async getDeptList(biz_id) {
			const data = await this.$service.dept.list({
				parent_id: 0,
				biz_id,
				is_store: 1
			});
			let deptList =
				data?.map(item => {
					let newItem = {
						id: item.dept_id,
						value: item.dept_id,
						label: item.dept_name,
						children: []
					};
					if (item.children && item.children.length) {
						newItem.children = item.children
							.filter(subItem => subItem.parent_id == item.dept_id)
							.map(subItem => {
								return {
									id: subItem.dept_id,
									value: subItem.dept_id,
									label: subItem.dept_name
								};
							});
					}
					return newItem;
				}) ?? [];
			this.deptList = deptList;
		},
		async changeAppointDept(v, is_reset = true) {
			this.appointUser = [];
			this.appointUser = await this.getUserList({
				biz_id: this.detail.biz_id,
				dept_id: v
			});
			console.log(this.appointUser, "this.appointUser ");
		},
		async getUserList(params) {
			const { data } = await this.$service.user.list(params).catch(() => []);
			return data || [];
		},

		isSpecSelected(userId) {
			const { teacher_id, light_teacher_id } = this.teacherForm;

			// 禁用已经被选择的老师

			return userId === teacher_id || userId === light_teacher_id ? true : false;
		},
		async getTeacherList(item) {
			let res = await this.$service.user.list({
				dept_id: item.dept_id,
				biz_id: item.biz_id,
				status: 1,
				is_teacher: 1
			});
			this.teacherList = res.data;
		},
		async init() {
			const { cus_id } = this.detail;
			const data = await this.$service.order.cusDetail({ cus_id });
			try {
				this.list = data ?? [];
				this.list.forEach(e => {
					const { cartlists, mainlists } = e;

					this.$set(e, "restAmount", e.rest_amount * 1);

					if (!mainlists.length) return;
					(cartlists ?? []).forEach((v, i) => {
						if (mainlists[i]?.prod_id != v?.prod_id) {
							e.mainlists[i] && this.$set(e.mainlists[i], "is_name", v.prod_name);
							e.mainlists[i] && this.$set(e.mainlists[i], "is_show", true);
							e.mainlists[i] && this.$set(e.mainlists[i], "self_price", v.unit_price);
						}
					});
				});
			} catch (error) {
				console.log(error);
			}
			this.activeTabs = Array(data.length).fill("first");
		},
		refundCancel(item) {
			this.confirm("是否撤销退款?")
				.then(async () => {
					item.refundcancelLoading = true;
					await this.$service.orderrefund
						.cancel({ orderId: item.main_id })
						.finally(() => {
							item.refundcancelLoading = false;
						});
					this.$message.success("撤销成功");
					this.init();
				})
				.catch(() => {});
		},
		async openLog(item) {
			this.logVisible = true;
			const { cus_id, biz_id } = this.detail;

			const { data } = await this.$service.customer.log({
				cus_id,
				biz_id,
				type: 2,
				page: 1
			});
			this.logs = data.reduce((prev, curr) => [...prev, ...curr.data], []);
		},
		submit() {
			this.$refs.accountsForm.validate(async valid => {
				if (!valid) return;
				await this.$service.order.liquiDate(this.form);
				this.form = {
					main_id: "",
					liquidate_time: dayjs().format("YYYY-MM-DD"),
					remark: ""
				};
				this.accountsVisible = false;
				this.$message.success("操作成功");
				this.init();
			});
		},
		//退款
		refund(item) {
			this.$refs.refundform.open(item);
		},
		cancelRefund(item) {
			console.log(item);
			this.confirm(`是否确定退款？`)
				.then(() => {
					this.$service.order.cancelLyRefund({ main_id: item.main_id }).then(() => {
						init();
					});
				})
				.catch(() => {});
			this.init();
		},
		//重置
		resetOrder(item) {
			let { dept_id, main_id, order_no } = item;
			if (!order_no) return;
			this.$refs.resetOrderForm.open({ dept_id, main_id, order_no });
		},
		async changeSource(item) {
			// console.log(item);
			this.sourceForm.cart_dept_id = item.cart_dept_id;

			this.sourceForm.main_id = item.main_id;
			this.sourceForm.user_id = item.add_user_id;
			await this.getDeptList(item.biz_id); //获取部门列表
			await this.changeAppointDept(item.cart_dept_id); //更换部门人员
			this.sourceDialog = true;
			// 修改来源信息
		},
		sourceConfirm() {
			this.$refs.sourceFormRef.validate(async valid => {
				if (valid) {
					this.$service.order.updateSource(this.sourceForm).then(res => {
						this.$message.success("修改成功");
						this.sourceForm = {};
						this.sourceDialog = false;
						this.init();
					});
				}
			});
		},
		// 老师列表

		async editTeacher(row, item) {
			console.log(row, item);

			this.editTeacherDialog = true;
			this.teacherForm = {
				main_id: item.main_id,
				list_id: row.list_id,
				light_teacher_id: row.light_teacher_id ? row.light_teacher_id : "",
				teacher_id: row.teacher_id ? row.teacher_id : ""
			};

			this.getTeacherList(item);
		},
		teacherConfirm() {
			this.$refs.teacherFormRef.validate(async valid => {
				if (valid) {
					this.$service.order.updateTeachers(this.teacherForm).then(res => {
						this.$message.success("修改成功");
						this.teacherForm = {};
						this.editTeacherDialog = false;
						this.init();
					});
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-collapse {
		border-top: none;
		border-bottom: none;
		&__arrow:not(.is-active) {
			transform: rotate(-90deg);
		}
		&-item__header {
			overflow: hidden;
		}
		&-item__header.is-active {
			border-bottom: 1px solid $border-main;
			height: auto;
		}
		&-item__content {
			padding-bottom: 0;
		}
	}
	.cl-crud {
		padding: 10px 0;
	}
	// .el-tabs--card > .el-tabs__header .el-tabs__nav {
	// 	border-top: 0;
	// }
	// .el-tabs--card > .el-tabs__header .el-tabs__nav:first-child {
	// 	border-left: 0;
	// }
}
.tab-card-pad {
	margin: 0 0 0 10px;
}
.pad-1 {
	padding: 10px 0;
}
.empty {
	text-align: center;
	color: #7f7f7f;
}
.title_item {
	width: 100%;
	padding: 10px;
	display: flex;
	justify-content: space-between;
}
.item-info {
	display: flex;
	align-items: center;
	line-height: normal;
	div {
		display: inline-block;
		+ div {
			margin-left: 20px;
		}
	}
	.add_user {
		color: $primary;
	}
}
.consume-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	div {
		display: inline-block;
		margin-right: 20px;
		strong {
			font-size: 18px;
		}
	}
}
::v-deep .textarea-s {
	.el-textarea__inner {
		height: 100px;
	}
}
</style>
